/* eslint-disable */
/**
 * Created by GYL on 2018/8/24
 */
//事件配置-编辑事件
import React, { Component } from 'react';
import styles from './index.less';
import { Collapse, Icon, Select, Input, Tooltip, Form, Row, Col, TreeSelect, Tag, message, Tree,Spin } from 'antd';
import PublicService from "../../../services/PublicService";
import config from '../../../config';
import Util from '../../../utils/Util';
import request from '../../../utils/request';
import MyTable from "../../../components/common/MyTable";
import MyModal from '../../../components/common/MyModal';
const { Panel } = Collapse;
const { Option } = Select;
const { TextArea } = Input;
const FormItem = Form.Item;
const { SHOW_CHILD } = TreeSelect;
const { TreeNode } = Tree;
const IconFont = Icon.createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/font_1315525_lex3d32v32.js',
});
var flag = false
class Edit_Wrap extends Component {
    state = {
        expandedKeys2: [],
        autoExpandParent2: true,
        checkedKeys2: [],
        selectedKeys2: [],
        treeData2: [],
        expandedKeys: [],
        autoExpandParent: true,
        checkedKeys: [],
        selectedKeys: [],
        treeData: [],
        spinning:true,
        checkedKeysFlag:false,
        checkedKeys2Flag:false,
        checkArr:[]
    };

    componentDidMount() {
        console.log(this.props)
        request({
            url: `/pm-web/projectmanage/eventinfo/getTwoTreeTwo?projectId=${this.props.id}`,
            method: 'GET',
        }).then(data => {
            console.log(data)
            //重置一次添加项
            // let params = {
            //     basicIds:data.ret.selectedIds,
            //     projectId:this.props.id
            // }
            // request({
            //     url: '/pm-web/projectmanage/eventinfo/addTree',
            //     method: 'POST',
            //     data: params
            // }).then(data => {})


            this.setState({
                //   data:data.ret
                spinning:false,
                treeData: data.ret.basicTree,
                expandedKeys: data.ret.keys,
                expandedKeys2: data.ret.keys,
                treeData2: data.ret.selectedTree,
                checkedKeys: data.ret.selectedIds,
                checkArr:data.ret.selectedIds,
               
            })
        })
    }

    onExpand = expandedKeys => {
        console.log('onExpand', expandedKeys);
        // if not set autoExpandParent to false, if children expanded, parent can not collapse.
        // or, you can remove all expanded children keys.
        this.setState({
            expandedKeys,
            autoExpandParent: false,
        });
    };

    onCheck = checkedKeys => {
        console.log('onCheck', checkedKeys);

            if(checkedKeys.length>0){
                this.setState({ checkedKeysFlag:true,checkedKeys2Flag:false,checkedKeys2:[] });
            }else{
                this.setState({ checkedKeysFlag:false,checkedKeys2Flag:false });
            }
            this.setState({ checkedKeys:[...checkedKeys,...this.state.checkArr] });
    
        



    };

    onCheck2 = checkedKeys2 => {
        console.log('onCheck', checkedKeys2);

            if(checkedKeys2.length>0){
                this.setState({ checkedKeys2Flag:true,checkedKeysFlag:false,checkedKeys:[] });
            }else{
                this.setState({ checkedKeys2Flag:false,checkedKeysFlag:false });
            }
            this.setState({ checkedKeys2 });
        

    };



    onSelect = (selectedKeys, info) => {
        console.log('onSelect', info);
        this.setState({ selectedKeys });
    };



    onExpand2 = expandedKeys2 => {
        console.log('onExpand', expandedKeys2);
        // if not set autoExpandParent to false, if children expanded, parent can not collapse.
        // or, you can remove all expanded children keys.
        this.setState({
            expandedKeys2,
            autoExpandParent2: false,
        });
    };



    onSelect2 = (selectedKeys, info) => {
        console.log('onSelect', info);
        this.setState({ selectedKeys2: selectedKeys });
    };

    renderTreeNodes = data =>
        data.map(item => {
            if (item.children) {
                return (
                    <TreeNode title={item.title} key={item.key} icon={<IconFont type={item.icon} style={{ fontSize: 24 }} />} selectable={item.selectable}>
                        {this.renderTreeNodes(item.children)}
                    </TreeNode>
                );
            }
            return <TreeNode {...item} icon={<Icon type={item.icon} theme={item.theme} twoToneColor={item.twoToneColor} selectable={item.selectable} />} />;
        });

    onLeft = () => {

        let params = {
            projectId:this.props.id,
            basicIds: this.state.checkedKeys
        }
        request({
            url: '/pm-web/projectmanage/eventinfo/addEventBasic',
            method: 'POST',
            data: params
        }).then(data => {
            if (data.rc === 0) {
                message.success('保存成功!')
                request({
                    url: `/pm-web/projectmanage/eventinfo/getTwoTree?projectId=${this.props.id}`,
                    method: 'GET',
                }).then(data => {
                    console.log(data)
                    this.setState({
                        //   data:data.ret
                        treeData: data.ret.basicTree,
                        expandedKeys: data.ret.selectedIds,
                        expandedKeys2: data.ret.selectedIds,
                        treeData2: data.ret.selectedTree,
                        checkedKeys: data.ret.selectedIds,
                        checkArr:data.ret.selectedIds,
                       
                    })
                })
            }
        })

    }

    onRight = () => {
        console.log('向右')
    }

    goBackTwo = () => {
        this.props.goBackTwo()
    }


    onSave = () => {
        request({
            url: `/pm-web/projectmanage/eventinfo/getTwoTree?projectId=${this.props.id}`,
            method: 'GET',
        }).then(data => {
         
            this.setState({
                spinning:false,
                treeData: data.ret.basicTree,
                expandedKeys: data.ret.keys,
                expandedKeys2: data.ret.keys,
                treeData2: data.ret.selectedTree,
                checkedKeys: data.ret.selectedIds,
                checkArr:data.ret.selectedIds,
               
            })
        })
    }

    //添加
    tianjia = () => {
        console.log(this.state.checkedKeys)
        if(!this.state.checkedKeysFlag){
            return
        }
        if(this.state.checkedKeys.length < 1) {
            message.warning('请选择添加事件!')
            return
        }
        this.setState({
            spinning:true
        })
        let params = {
            basicIds:this.state.checkedKeys,
            projectId:this.props.id
        }
        request({
            url: '/pm-web/projectmanage/eventinfo/addTree',
            method: 'POST',
            data: params
        }).then(data => {
            console.log(data)
            if(data.rc === 0) {
                message.success('添加成功!')
                flag = true
                this.onSave()
            }else{
                message.warning(`${data.err}`)
            }
            this.setState({
                spinning:false
            })
        })


    }

    //删除
    onDelete = () => {
        console.log(this.state.checkedKeys2)

        if(!this.state.checkedKeys2Flag){
            return
        }
        
        if(this.state.checkedKeys2.length < 1) {
            message.warning('请选择删除事件!')
            return
        }

        this.setState({
            spinning:true
        })

        let params = {
            basicIds:this.state.checkedKeys2,
            projectId:this.props.id
        }
        request({
            url: '/pm-web/projectmanage/eventinfo/deleteTree',
            method: 'POST',
            data: params
        }).then(data => {
            console.log(data)
            if(data.rc === 0) {
                this.setState({
                    checkedKeys2:[]
                })
                flag = true
                message.success('删除成功!')
                this.onSave()
            }else{
                message.warning(`${data.err}`)
            }
            this.setState({
                spinning:false
            })
        })
    }


    //保存
    baocun = () => {
        if(!flag){
            return
        }
        this.setState({
            spinning:true
        })
        request({
            url: `/pm-web/projectmanage/eventinfo/saveData?projectId=${this.props.id}`,
            method: 'GET',
        }).then(data => {
            if(data.rc === 0) {
                message.success('保存成功!')
                this.props.goBackTwo()
              
            }else {
                message.warning(`${data.err}`)
            }
            this.setState({
                spinning:false
            })
        })
    }

    render() {
        let t = this
        let width = document.body.clientWidth;
        const height = document.body.clientHeight;
        let containerHeight = '76vh';
        let tableHeight = 310;
        if (width > 1367) {
            tableHeight = 380;
            containerHeight = '83vh';
        }



        return (
            <Spin tip="Loading..." spinning={this.state.spinning}>
            <div style={{ margin: 10, marginBottom: 0,marginTop:0, height: '90vh', backgroundColor: '#F6FCFC', boxShadow: "0px 0px 4px 0px rgba(223,223,223,1)", borderRadius: 3 }}>
                <div style={{ height: '30px', backgroundColor: '#D6EDEB', display: 'flex', alignItems: 'center', flexDirection: 'row', borderRadius: 3, border: '2px solid #fff', paddingLeft: 15 }}>编辑事件</div>
                <div className={styles.warpBox} style={{ height: '80vh', backgroundColor: '#F6FCFC', overflow: 'auto' }}>

                    <div style={{ flex: 1, backgroundColor: '#f6f6f18a', overflow: 'auto', display: 'flex' }}>
                        <div style={{ flex: 4, display: 'flex', alignItems: 'center', flexDirection: 'column', overflow: 'auto', height: '80vh' }}>
                            <div style={{ fontSize: 14, fontWeight: 700, textAlign: 'center', width: '100%', boxShadow: "0px 0px 4px 0px rgba(223,223,223,1)", borderRadius: 3, backgroundColor: '#fff', marginTop: 3 }}>待选取</div>
                            <div style={{ flex: 1, overflow: 'auto', maxHeight: '80vh', borderRadius: 3, backgroundColor: '#fff', boxShadow: "0px 0px 4px 0px rgba(223,223,223,1)", margin: 3, width: '100%' }}>
                                <Tree
                                    showIcon
                                    checkable
                                    onExpand={this.onExpand}
                                    expandedKeys={this.state.expandedKeys}
                                    autoExpandParent={this.state.autoExpandParent}
                                    onCheck={this.onCheck}
                                    checkedKeys={this.state.checkedKeys}
                                    onSelect={this.onSelect}
                                    selectedKeys={this.state.selectedKeys}
                                // checkStrictly={true}
                                >
                                    {this.renderTreeNodes(this.state.treeData)}
                                </Tree>
                            </div>

                        </div>
                        <div style={{ flex: 1, display: 'flex', alignItems: 'center', flexDirection: 'column', backgroundColor: '#f7f5f5', justifyContent: 'space-around' }}>
                            <div style={{ color: '#fff', width: 80, height: 26, background: this.state.checkedKeysFlag?'#00BB96':'#ccc', borderRadius: 14, textAlign: 'center', lineHeight: '26px', cursor: 'pointer' }} onClick={this.tianjia}>添加</div>

                            <div style={{ color: '#fff', width: 80, height: 26, background: this.state.checkedKeys2Flag?'#ED424E':"#ccc", borderRadius: 14, textAlign: 'center', lineHeight: '26px', border: '1px solid #ccc', cursor: 'pointer' }} onClick={this.onDelete}>删除</div>

                        </div>


                        <div style={{ flex: 4, display: 'flex', alignItems: 'center', flexDirection: 'column', overflow: 'auto', height: '80vh' }}>
                        <div style={{ fontSize: 14, fontWeight: 700, textAlign: 'center', width: '100%', boxShadow: "0px 0px 4px 0px rgba(223,223,223,1)", borderRadius: 3, backgroundColor: '#fff', marginTop: 3 }}>已选取</div>
                            <div style={{ flex: 1, overflow: 'auto', maxHeight: '80vh', borderRadius: 3, backgroundColor: '#fff', boxShadow: "0px 0px 4px 0px rgba(223,223,223,1)", margin: 3, width: '100%' }}>
                                <Tree
                                    showIcon
                                    checkable
                                    onExpand={this.onExpand2}
                                    expandedKeys={this.state.expandedKeys2}
                                    autoExpandParent={this.state.autoExpandParent2}
                                    onCheck={this.onCheck2}
                                    checkedKeys={this.state.checkedKeys2}
                                    onSelect={this.onSelect2}
                                    selectedKeys={this.state.selectedKeys2}
                                // checkStrictly={true}
                                >
                                    {this.renderTreeNodes(this.state.treeData2)}
                                </Tree>
                            </div>
                        </div>

                    </div>
                </div>
                <div className={styles.Bottom_Box}>
                    <div style={{ color: '#fff', width: 136, height: 32, background: 'rgba(0,171,187,1)', borderRadius: 14, textAlign: 'center', lineHeight: '32px', cursor: 'pointer' }} onClick={this.baocun}>保存</div>

                    <div style={{ color: 'red', width: 136, height: 32, background: '#fff', borderRadius: 14, textAlign: 'center', lineHeight: '32px', border: '1px solid #ccc', cursor: 'pointer' }} onClick={this.goBackTwo}>关闭</div>
                </div>
            </div>
            </Spin>
        );


    }
}
export default Edit_Wrap;

